<template>
	<view class="index">
		<nav-bars backState="1000" bgColor="#fff" fontColor="#000" title="接待人员"></nav-bars>
		<view class="list">
			<view class="naME" v-if="qy_user_data.length>0" v-for="(item,index) in qy_user_data" :key="index">
				<view class="b_sLogo" v-if="item.avatar"><image :src="item.avatar"></image></view>
				<view class="b_sLogo" v-else><image src="@/static/common/avator.png"></image></view>
				<view class="b_sName"><text>{{item.name}}</text><text class="texct2">接待人员</text></view>
				<text class="iconfont icon-close"  @click="gitclose(item)"></text>
			</view>
			<view v-if="qy_user_data.length==0" style="line-height: 200rpx;text-align: center;color:#888;">暂无接待人员，请添加接待人员！</view>
		</view>
		<view class="kefu-btn" @click ="showTag">添加接待</view>

	
		<!-- 弹窗-员工 -->
		<view class="pop_filter" v-if="brandLstpop" style="z-index: 999;">
			<view class="p_fBg" @tap="brandLstpop = false"></view>
			<view class="p_fBox">
				<view class="p_fTop" style=" padding-left: 0;">
					<view class="b_container">
						<!-- 搜索 -->
						<view class="b_search">
							<view class="b_sInput">
								<view class="i_siIcon"><view class="iconfont icon-search"></view></view>
								<input type="text" @input="searchBrand" placeholder="查找员工" placeholder-class="col-666"/>
							</view>
						</view>
						
						<scroll-view class="b_scroll" scroll-y :scroll-into-view="scrollSort">
							<!-- 数据 -->
							<view class="b_sort">
								<view class="b_sGroup">
									<view class="b_sTit">员工</view>
									<view class="b_sList">
										<view class="b_sItem" v-for="(item,index) in wxlist" :key="index" @click="barndchoselist(item)">
											<view class="setchose" :class="{active:id_lst.includes(item.user_id)}"></view>
											<view class="b_sLogo" v-if="item.avatar"><image :src="item.avatar"></image></view>
											<view class="b_sLogo" v-else><image src="@/static/common/avator.png"></image></view>
											<view class="b_sName">{{item.name}}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
						
				</view>
				<view class="p_fBtm">
					<view class="p_fReset" @click="closebrandLstpop">清空</view>
					<view class="p_fConfim" @click="gitadd()">确认</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import service_mall from '@/service/now.js'
import URL from '@/config/url.js'
export default {
	data() {
		return {
		   type:1,
		   brandLstpop:false,
		   wxlist: [],    // 员工数据
		   searchVal: '',
		   id_lst:[],//选中的员工
		   qy_user_data:[],
		   config_id:"",
		   scene:1,
		   style:'',
		   remark:'',
		   state:'',
		   small_app_sence:'', 
		   config:true,
		   typeshow:true,
		}
	},
	onLoad(e) {
		this.getkufuLst()
		this.getwxLst()
	},
	methods: {
		// 接待列表
		getkufuLst(){
			service_mall.getKeFuServicerList({})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						if(data.length>0){
							for(let i =0; i<data.length;i++){
								this.qy_user_data.push(
								  {
									  name:data[i].nickname,
									  avatar:data[i].headimg.path,
									  realname:data[i].realname,
									  normal_url:data[i].normal_url,
									  qy_mobile:data[i].mobile,
									  qy_wechat_id:data[i].qy_user_id,
									  status:data[i].status,
									  user_id:data[i].user_id,
								  }
								
								)
							}
						}
						console.log(this.qy_user_data)
					}
				})
		},
		// 删除接待人员
		gitclose(item){
			let that = this
			let  qy_user_id = []
			qy_user_id.push(item.qy_wechat_id)
			uni.showModal({
			    title: '提示',
			    content: '确认删除该接待人员?',
			    success: function (res) {
			        if (res.confirm) {
			           service_mall.getKeFuServicerDel({
			           	qy_user_ids:qy_user_id
			             })
			           	.then(res => {
			           		if (res.code == 1) {
			           			uni.showToast({
			           				title:'删除成功！',
			           				icon:'none'
			           			})
								that.qy_user_data = []
								that.getkufuLst()
			           		}
			           })  	
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		// 员工列表
		getwxLst(){
			service_mall.getwxlist2({})
				.then(res => {
					if (res.code == 1) {
						let data = res.data.data
						this.wxlist = data
					}
				})
		},
		// 选择员工
		barndchoselist(item){
			if(this.id_lst.includes(item.user_id)){
				this.id_lst=this.id_lst.filter(function (ele){return ele != item.user_id;});
				this.qy_user_data = this.qy_user_data.filter(function (ele){return ele != item;});
			}else{
				this.id_lst.push(item.user_id);
				this.qy_user_data.push(item);
			}
		},
		gitadd(){
			if(this.id_lst == []){
			  uni.showToast({
				title:'请选择员工',
				icon:'none'
			  })
			  return
			}
			service_mall.getKeFuServicerAdd({
				user_ids:this.id_lst
			  })
				.then(res => {
					if (res.code == 1) {
						uni.showToast({
							title:'添加接待成功！',
							icon:'none'
						})
						this.qy_user_data = []
						this.getkufuLst()
						this.brandLstpop = false
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
			})
		},
		showTag(){
		      this.brandLstpop = true
		},
		closebrandLstpop(){
			this.id_lst=[]
			this.qy_user_data = []
			this.brandLstpop = false
		},
	}
}
</script>

<style lang="scss" scoped>
.index{
	width: 100%;height: 100vh;background: #fff;display: flex;flex-flow: column;
}
.kefu-itme{
	padding: 20rpx;
	position: relative;
	padding-left: 180rpx;
}
.kefu-itme .kefu-left{
	position: absolute;
	left: 0;
	top:0;
	padding-left:20rpx;
	line-height: 110rpx;
	width: 180rpx;
	text-align: left;
}
.kefu-right .choice{
	display: inline-block;
	line-height: 70rpx;
	padding-left: 55rpx;
	background: url(../../static/mall/uncheck.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 42rpx;
	margin-right: 60rpx;
}
.kefu-right .choice.active{
	background: url(../../static/mall/selected.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 42rpx;
}
.ikbtn{
	border-radius: 10rpx;
	width: 160rpx;
	line-height:60rpx;
	text-align: center;
	border:1rpx #cdb78d solid;
}
.kefu-img image{
	width: 50%;
	display: block;
}
.iklist{
	line-height: 80rpx;
	margin-top: 5rpx;
}
.kefu-right .icon-close{
	float: right;
	font-size: 40rpx;
	margin-top: 20rpx;
}
.kefu-btn{
	width: 70%;
	line-height: 80rpx;
	text-align: center;
	border-radius: 50rpx;
	background: #cdb78d;
	color: #fff;
	position: fixed;
	bottom:20rpx;
	left: 15%;
}
// 弹窗-筛选框
	.pop_filter {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 501;
		.p_fBg {width: 100%;height: 100%;background: rgba(0, 0, 0, .6);}
		.p_fBox {width: 612rpx;height: 100%;background: #fff;position: absolute;top: 0;right: 0;display: flex;flex-flow: column;}
		.p_fTop {padding: 150rpx 0 0 32rpx;overflow-y: auto;flex: 1;}
		.p_fTit {height: 40rpx;line-height: 40rpx;font-weight: bold;margin-top: 62rpx;
		         .more{
					 float: right;
					 font-size: 24rpx;
					 color: #666;
					 font-weight: normal;
					 margin-right: 20rpx;
					     height: 40rpx;
					     line-height: 40rpx;
					 text{
						 font-size: 22rpx;
					 }
					 i{
						display: inline-block;
						max-width: 300rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: pre;
						float: left;
						color: #c3ab7c;
						font-size: 22rpx; 
						margin-right: 5rpx;
					 }
				 }
				}
		.p_fCheckbox {display: flex;flex-wrap: wrap;}
		.p_fCheckbox2 {max-height: 485rpx;overflow: hidden;width: 100%;}
		.p_fCheckbox2.active {max-height: auto;overflow: auto;width: 100%;}
		.p_fcItem {width: 170rpx;height: 76rpx;text-align: center;font-size: 22rpx;padding: 0 8rpx;margin: 20rpx 20rpx 0 0;border: 1px solid #e5deca;border-radius: 4rpx;background: #fff;display: flex;justify-content: center;align-items: center;
			&.active {color: #fff;border-color: #c3ab7c;background: #c3ab7c;}
		}
		.p_fInputMore {margin-top: 20rpx;display: flex;}
		.p_fInput {width: 244rpx;height: 66rpx;text-align: center;border-radius: 4rpx;background: #f6f7fb;		
			& > input {width: 100%;height: 100%;font-size: 22rpx;}
		}
		.p_fGap {width: 60rpx;height: 66rpx;line-height: 66rpx;text-align: center;color: #707070;}
		.p_fBtm {height: 114rpx;border-top: 1px solid #f8f6f3;box-sizing: content-box;display: flex;justify-content: center;align-items: center;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);}
		.p_fReset, .p_fConfim {width: 258rpx;height: 60rpx;color: #fff;border-radius: 36rpx;background: #c3ab7c;display: flex;justify-content: center;align-items: center;
			&:active {opacity: .88;}
		}
		.p_fReset {color: #c3ab7c;margin-right: 32rpx;border: 1px solid #c2ab7b;background: #fff;}
	}
.b_container {position: relative;overflow: hidden;flex: 1;}
	// 搜索
	.b_search {width: 100%;height: 122rpx;background: #fff;position: absolute;top: 0;left: 0;z-index: 2;overflow: hidden;
		.b_sInput {height: 74rpx;padding: 0 70rpx;margin: 24rpx 36rpx 0;border-radius: 38rpx;background: rgba(246, 247, 251, .8);position: relative;
			& > input {width: 100%;height: 100%;}
			.i_siIcon {width: 70rpx;height: 74rpx;line-height: 74rpx;color: #666;font-size: 32rpx;padding-left: 28rpx;position: absolute;top: 0;left: 0;}
		}
	}
	.b_scroll {width: 100%;height: 100%;padding-top: 122rpx;}
	// 精选推荐
	.b_recomd {padding: 24rpx 0 56rpx 36rpx;background: #fff;
		.b_rTitle {height: 50rpx;line-height: 50rpx;font-size: 36rpx;font-weight: bold;color: #000;}
		.b_rList {display: flex;flex-wrap: wrap;}
		.b_rItem {width: 144rpx;height: 144rpx;margin: 32rpx 32rpx 0 0;border-radius: 8rpx;background: #f6f7fb;}
		.b_rImg {width: 96rpx;height: 96rpx;margin: 6rpx auto 0;}
		.b_rTxt {height: 32rpx;line-height: 32rpx;text-align: center;color: #939393;font-size: 22rpx;}
	}
	// 数据
	.b_sort {padding-bottom: 32rpx;
		.b_sGroup {}
		.b_sTit {height: 40rpx;line-height: 40rpx;font-weight: bold;padding-left: 36rpx;background: #f8f8f8;position: sticky;top: 0;z-index: 2;font-size: 20rpx;}
		.b_sList {padding-left: 38rpx;background: #fff;}
		.b_sItem {height: 138rpx;line-height: 138rpx;padding-left: 180rpx;position: relative;
			&::after {content: "";width: 100%;height: 1px;background: rgba(0, 0, 0, .08);position: absolute;bottom: 0;left: 0;transform: scaleY(.5);}
			&:nth-last-child(1)::after {content: none;}
		}
		.b_sLogo {width: 96rpx;height: 96rpx;margin-top: -48rpx;background: #f6f7fb;position: absolute;top: 50%;left: 60rpx;}
	}	
// 筛选
	.b_filter {width: 52rpx;position: fixed;top: 50%;right: 0;z-index: 2;transform: translateY(-50%);
		.b_fLetter {height: 32rpx;line-height: 32rpx;text-align: center;font-size: 20rpx;padding-left: 20rpx;}
	}
.setchose{
	display: block;
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: -15rpx;
	top:50%;
	margin-top: -20rpx;
	background: url(@/static/mall/uncheck.png) no-repeat center center;
	background-size: 100%;
}
.setchose.active{
	background: url(@/static/mall/selected.png) no-repeat center center;
	background-size: 100%;
}
.list{
	padding:20rpx;
}
.naME{
	border-bottom: 1px #dedede solid;
	    padding: 20rpx 0;
	    height: 160rpx;
	    position: relative;
	.b_sLogo{
		    float: left;
		    width: 120rpx;
		    height: 120rpx;
		    margin-right: 20rpx;
		    border-radius: 50%;
		    overflow: hidden;
		image{
		 width:120rpx;
		 height:120rpx;	
		}
	}
	.icon-close{
		position: absolute;
		    right: 10rpx;
		    font-size: 40rpx;
		    bottom: 50rpx;
	}
	.b_sName{
		overflow: hidden;
		text{
			display: block;
			font-size: 32rpx;
			line-height: 60rpx;
			color:#333;
		}
		text.texct2{
			display: block;
			font-size: 26rpx;
			line-height: 60rpx;
			color:#999;
		}
	}
}
</style>